<template>
  <ul class="sideul">
    <li>个性签名</li>
    <p>{{ showList.uinfor }}</p>
    <a-divider />
    <router-link to="/user/userothers">
      <AppstoreOutlined style="margin-right: 5px" />
      <span @click="show6()">他关注的专题</span>
    </router-link>
    <br />
    <router-link to="/user/userothers">
      <HeartOutlined style="margin-right: 5px" />
      <span @click="show7()">他的喜欢和收藏</span>
    </router-link>
    <a-divider />
    <li>他创建的专题</li>
    <p
      id="colorChange"
      v-for="(cs, index) in showList.collections"
      :key="index"
      @click="gotoCollectionPage(cs)"
    >
      <LayoutOutlined style="margin-right: 5px" />{{ cs.filename }}
    </p>
    <a-divider />
    <li>他整理的内容</li>
    <p v-for="(at, index) in showList.arrangeList" :key="index">
      <BookOutlined style="margin-right: 5px" />{{ at.fileName }}
    </p>
  </ul>
</template>
<script>
import { defineComponent, reactive } from "vue";
import {
  AppstoreOutlined,
  HeartOutlined,
  BookOutlined,
  LayoutOutlined,
} from "@ant-design/icons-vue";
import VueEvent from "../../utils/event";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const showList = reactive({
      uinfor: "",
      arrangeList: [],
      collections: [],
    });

    const gotoCollectionPage = (cs) => {
      // console.log(cs.cid);
      router.push({ path: "/collectionsPage", query: { cid: cs.cid } });
    };

    VueEvent.on("userSide", (e) => {
      showList.uinfor = e.uinfor;
      showList.arrangeList = e.arrangeList;
      showList.collections = e.collections;
      // console.log(showList);
    });

    const show6 = () => {
      VueEvent.emit("userOthers3");
    };
    const show7 = () => {
      VueEvent.emit("userOthers4");
    };

    return {
      showList,
      show6,
      show7,
      gotoCollectionPage,
    };
  },
  components: {
    AppstoreOutlined,
    HeartOutlined,
    BookOutlined,
    LayoutOutlined,
  },
});
</script>

<style scoped>
.sideul {
  margin-left: 20px;
  padding: 0;
}
.sideul li {
  list-style-type: none;
  font-weight: lighter;
  font-size: 10px;
  margin-bottom: 10px;
}
#colorChange:hover {
  color: #005177;
  cursor: pointer;
}
</style>